<template>
    <div class="app">
        <div class="title">订单详情</div>
        <div class='list'>
            <div class="goods" v-for="(item,index) in order.goods_list" :key='index'>
                <div class='info'>
                    <div class='pic'>
                        <img :src="resurl+item.pic+'?x-oss-process=image/resize,m_fill,w_750,h_300'" alt="">
                    </div>
                    <div class='name'>{{item.name}}</div>
                    <div class='price'>￥{{item.price}}</div>
                    <div class='number'>x{{item.buynumber}}</div>
                </div>
            </div>
        </div>
        <div class='title'>收货地址</div>
        <div class='line' @click='changeaddress'>
            <div class='right'>
                <text class='adress'>修改地址</text>
                <div v-if="address==null" class='noaddress'>
                    <text>您尚未设置收件地址\n点击设置</text>
                </div>
                <div v-else class='address'>
                    <div class='text'>
                        <text space='ensp'>{{address.province}} {{address.city}} {{address.county}}</text>
                    </div>
                    <div class='text'>{{address.addressdetail}}</div>
                    <div class='text'>
                        <text space='ensp'>{{address.addressee}} {{address.tel}}</text>
                    </div>
                </div>
            </div>
        </div>
        <div class='real_price'>实付款 ¥{{order.totalprice}}</div>

        <div class='buy_btn' @click='buy'>立即购买</div>
    </div>
</template>

<script>
    var that = null
    export default {
        data() {
            return this.datainit({
                pre_token: null,
                order: [],
                orderno: null,
                address: ''
            })
        },
        onShow() {
            that = this
            that.check()
        },
        mounted() {
            that.pre_token = that.get("pre_token")
        },
        methods: {
            init() {
                that.$post("shop/order/get_pre", {pre_token: that.pre_token}, function (data) {
                    that.order = data;
                    console.log(that.order.type)
                })
            },
            buy: function () {
                if (that.orderno != null) {
                    that.pay();
                    return;
                }
                that.$post("shop/order/make", {
                    type: that.order.type,
                    pre_token: that.pre_token,
                    address:JSON.stringify(that.address)
                }, function (orderno) {
                    that.orderno = orderno
                    console.log(that.orderno.orderno)
                    that.pay()
                })
            },
            pay: function () {
                that.$post("shop/order/pay", {orderno: that.orderno.orderno}, function (data) {
                    wx.requestPayment({
                        'timeStamp': data.timestamp + '',
                        'nonceStr': data.nonceStr,
                        'package': data.package,
                        'signType': 'MD5',
                        'paySign': data.paySign,
                        'success': function (ref) {
                            wx.redirectTo({
                                url: "/pages/shop/order_list/main",
                            })
                        },
                        'fail': function (ref) {
                            that.toasts("支付失败")
                        }
                    })
                })
            },
            toasts: function (message) {
                wx.showToast({
                    title: message,
                    icon: 'none',
                    duration: 2000
                })
            },
            changeaddress: function () {
                wx.chooseAddress({
                    success: function (res) {
                        var address = {
                            addressee: res.userName,
                            province: res.provinceName,
                            addressdetail: res.detailInfo,
                            city: res.cityName,
                            county: res.countyName,
                            tel: res.telNumber
                        }
                        that.address = address
                        console.log(that.address)
                    }
                })
            },

        }
    }
</script>

<style scoped lang="less">
    .title {
        position: relative;
        font-size: 16px;
        color: #ff6600;
        margin: 5px 0 5px 10px;
    }

    .list {

        .goods {
            position: relative;
            width: 100%;
            height: 90px;
            font-size: 0.8rem;
            background: #fff;
            .info {
                position: absolute;
                left: 10px;
                right: 10px;
                top: 10px;
                bottom: 10px;
                overflow: hidden;
                font-size: 14px;
                .pic {
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 80px;
                    height: 80px;
                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
                .name {
                    position: absolute;
                    left: 90px;
                }
                .price {
                    position: absolute;
                    left: 90px;
                    top: 50px;
                    color: #f00;
                }
                .number {
                    position: absolute;
                    right: 0px;
                    top: 50px;
                    color: #f00;
                }
            }
        }
    }

    .line {
        position: relative;
        background-color: #fff;
        line-height: 40px;
        font-size: 0.8rem;
        margin-top: 5px;
        margin-bottom: 5px;
        width: 100%;
        .right {
            font-size: 16px;
            .adress {
                color: #fc3d3d;
                position: absolute;
                right: 0px;
                top: -10px;
            }
            .address {

                .text {
                    width: 85%;
                    padding: 0 10px;
                    height: 26px;
                    line-height: 26px;
                    font-size: 14px;
                    color: #666;
                }
            }
        }
    }

    .real_price {
        height: 40px;
        line-height: 40px;
        background-color: white;
        font-size: 17px;
        color: red;
        bottom: 0px;
        right: 12px;
        padding: 0 10px;
        margin-top: 20px;
        text-align: right;
    }

    .buy_btn {
        display: block;
        width: 220px;
        height: 36px;
        line-height: 36px;
        border: transparent;
        color: #FFF;
        border-radius: 3px;
        background-color: #fc3d3d;
        font-size: 15px;
        text-align: center;
        margin: auto;
        margin-top: 20px;
    }
</style>

